<template>
	<view class="container">
		<view class="page_top">
			<view class="table_title">
				<view class="li">
					<span>访问小程序</span>
					<view class="erweima">
						<image src="/static/images/xcxm.jpg" mode="widthFix"></image>
					</view>
				</view>
				<view class="li">
					<span @click="toPage('/pages/news/notice')"> <i class="iconfont">&#xe67a;</i> 消息</span>

					<el-dropdown @command="fabu_handleCommand">
						<span style="color: green;"><i class="iconfont">&#xe66f;</i> 家庭发布</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">发文章</el-dropdown-item>
							<el-dropdown-item command="2">发图文</el-dropdown-item>
							<el-dropdown-item command="3">发视频</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<el-dropdown @command="fabulife_handleCommand">
						<span style="color: yellow;"><i class="iconfont">&#xe66f;</i> 生活发布</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">发文章</el-dropdown-item>
							<el-dropdown-item command="2">发图文</el-dropdown-item>
							<el-dropdown-item command="3">发视频</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<span style="color: blue;" @click="toPage('/pagesfriend/tabbar/fabu')"> <i
							class="iconfont">&#xe67a;</i> 广场发布</span>

					<!-- 		<span @click="toPage('/pages/tabbar/mine/mine')">
            <image :src="userInfo.avatar" mode="aspectFill"></image>
            {{userInfo.showName}}
          </span> -->
					<!-- v-if="userInfo.showName" -->
					<el-dropdown @command="mine_handleCommand" v-if="Object.keys(userInfo).length > 0">
						<span style="color: #fff;" @click.stop="toPage('/pages/tabbar/mine/mine')">
							<image :src="userInfo.avatar" mode="aspectFill"></image>
							{{ userInfo.showName }}
						</span>

						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="1">个人主页</el-dropdown-item>
							<el-dropdown-item command="2">我的收藏</el-dropdown-item>
							<el-dropdown-item command="3">我的足迹</el-dropdown-item>
							<el-dropdown-item command="4">我的设置</el-dropdown-item>
							<el-dropdown-item command="5">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>


				</view>
			</view>

			<view class="searchBox">
				<image src="/static/images/logo.png" mode="widthFix"></image>
				<view class="iunputs" @click="toSearch">
					<!-- <input type="text" placeholder="请输入查询信息" disabled/> -->
					<span style="color: #6b6767;">请输入查询信息</span>
					<i class="iconfont">&#xe61d;</i>
				</view>
			</view>

			<view class="gongulist">
				<!-- <span @click="toPage('/')">首页</span> -->
				<span @click="toPage('/pages/tabbar/video/video')">视频</span>
				<span @click="toPage('/pages/chat/index')">AI管家</span>
				<span class='family' @click="toPage('/pages/tabbar/family/family')">家庭</span>
				<span @click="toPage('/pages/tabbar/mine/mine')">我的</span>
				<el-dropdown @command="handleCommand">
					<span class="el-dropdown-link">
						AI工具箱<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item,index) in Ailist" :key="index"
							:command="item.workflowId">{{ item.workflowName }}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<!-- <span @click="toPage('/pages/work/index')">任务池</span> -->
			</view>

			<view class="gongulist2">
				<span @click="toPage('/pages/life/index')">个人生活</span>
				<span @click="toPage('/pagesobit/obit/index')">纪念馆</span>
				<span @click="toPage('/pagesfriend/tabbar/index')">广场</span>
				<span @click="toPage('/pages/chat/chat')">亲人聊天</span>
				<span @click="toPage('/pages/calendar/index2')">家庭日历</span>
				<span @click="toPage('/pages/draft/index')">我的草稿</span>
			</view>

			<video autoplay :controls="false" muted src="/static/indexbg.mp4" :loop="true" object-fit="cover"></video>
		</view>
		<!-- <headertop :inv="1"></headertop> -->

		<view class="homePage">
			<view class="rightBox">
				<view class="fenlei2">
					<view class="list" :class="tabClick == index?'active':''" v-for="(item, index) in tabTitle"
						:key="index" @click="longClick(index)">
						<span>{{ item.name }}</span>
					</view>
				</view>

				<el-dialog class="text-center" title="家庭日历提醒事项" :visible.sync="tiplist.length>0" width="40%">
					<view class="boxs">
						<view class="list" v-for="(item,index) in tiplist" :key="index">
							<view class="title   flex flex-column justify-center align-start">
								<view class=""><b>开始时间</b>：{{item.dateWithStartTime}}</view>
								<view class=""><b>标题</b>：{{ item.title }}</view>
								<view class=""><b>内容</b>：{{ item.remark }}</view>
								<view class="red-line mb-2" v-if="tiplist.length>1"></view>
							</view>
						</view>
					</view>
					<span slot="footer" class="flex justify-center align-center">
						<el-button type="primary" @click="tiplist = []">确 定</el-button>
					</span>
				</el-dialog>

				<view class="fenlei" v-if="tabTitle.length>0 && tabTitle[currentTab].name=='分享'">
					<div class="flex">
						<view style="min-width: 100px;" class="mr-5" @click="changeFenleiInv(0)"
							:class="fenleiInv == 0?'active':''">
							他人分享
						</view>
						<el-dropdown @command="handleShareArticleCategoryChange">
							<view :class="fenleiInv == 0?'active':''" style="margin-right: 10px;">
								{{ ShareArticleCategoryName }} <i class="el-icon-arrow-down el-icon--right"></i>
							</view>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item v-for="(item,index) in allArticleCategory" :key="index"
									:command="item">{{ item.name }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>

					<!-- <view @click="selectorVisible = true" :class="fenleiInv == 1?'active':''">
            <span style="display: flex;align-items: center;">{{ArticleCategoryName}} <i class="iconfont"
                style="font-size: 30rpx;margin-left: 10rpx;color: #333;">&#xe61c;</i></span>
          </view> -->
					<el-dropdown @command="handleSystemArticleCommand">
						<view :class="fenleiInv == 1?'active':''" style="margin-right: 10px;">
							{{ ArticleCategoryName }}<i class="el-icon-arrow-down el-icon--right"></i>
						</view>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(item,index) in wenzhangfenlei" :key="index"
								:command="item">{{ item.name }}
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<view @click="toPage('/pagesfriend/tabbar/index')" :class="fenleiInv == 2?'active':''">进入广场</view>
				</view>

				<view class="">
					<view class="content" v-if="listData.length > 0">
						<view class="card" v-for="(item, index) in listData" :key="index">
							<new-item @videoPlay="videoPlay" :new="item" :newIndex="index"
								:isfirst="tabClick == 0?true:false" :tabname="tabTitle[currentTab].name"
								@share="showShareDia"></new-item>
						</view>
					</view>
					<nodata v-if="listData.length == 0"></nodata>
					<div v-if="isLoading" class="loading">加载中...</div>
					<div v-if="hasNoMoreData" class="loading">-------没有更多数据了-------</div>
				</view>
			</view>

			<view class="leftbox">

				<view class="userInfo">
					<view class="touxiangs">
						<image :src="userInfo.avatar?userInfo.avatar:'https://cdn-oss.familylove.online/male.jpg'"
							mode="aspectFill"></image>
						<span>{{ userInfo.showName }}</span>
						<i class="iconfont">&#xe613;</i>
					</view>

					<view class="nums">
						<view class="li">
							{{ huizong.familyCount }} <span> 发家庭数</span>
						</view>
						<view class="li">
							{{ huizong.articleCount }} <span>文章数量</span>
						</view>
						<view class="li">
							{{ huizong.lifeCount }} <span> 生活数量</span>
						</view>
					</view>

					<view class="nums">
						<view class="li list22" @click="toPage('/pages/create/article')">
							<image
								src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/article_icon.c91fb7e0.svg"
								mode="aspectFill"></image>
							<span>发文章</span>
						</view>
						<view class="li list22" @click="toPage(`/pages/create/article?isMylife=${isMylife}`)">
							<image
								src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/wtt_icon.0c5bb1de.svg"
								mode="aspectFill"></image>
							<span>发生活</span>
						</view>
						<view class="li list22" @click="toPage(`/pagesfriend/tabbar/fabu`)">
							<image
								src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/wenda_icon.0d6d1616.svg"
								mode="aspectFill"></image>
							<span>发广场</span>
						</view>
					</view>
				</view>


				<view class="tuijianVideo">
					<view class="titles">
						<image
							src="https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/security_icon.6e66438b.svg"
							mode="widthFix"></image>
						<span>推荐视频</span>
					</view>

					<view class="videolist">
						<!-- @click="toVideoInfo(index)" -->
						<view class="listss" @click="toPage('/pages/news/details?id='+item.docId+'&isShared=true')"
							v-for="(item,index) in videolist" :key="index">
							<image :src="item.posterUrl" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="popup" type="bottom">
			<share @closeDia="$refs.popup.close()"></share>
		</uni-popup>

		<drag-button :isDock="true" :existTabBar="true" />


		<w-picker :visible.sync="selectorVisible" mode="selector" default-type="name" :default-props="defaultProps"
			:options="wenzhangfenlei" @confirm="onConfirm($event,'selector')" ref="selector"></w-picker>
	</view>
</template>

<script>
	const util = require('@/common/refresh.js');
	import newItem from '@/components/new-item.vue';
	import refresh from '../../../components/refresh.vue';
	import share from '@/components/share/share.vue'
	import dayjs from 'dayjs'
	import dragButton from "@/components/drag-button/drag-button.vue";
	// import fireworks from '@/components/fireworks/fireworks.vue'
	// import guideStep from "@/components/guideStep/guideStep.vue";

	export default {
		components: {
			refresh,
			newItem,
			share,
			dragButton,
		},
		data() {
			return {
				familyTipsDia: false,
				selectorVisible: false,
				ArticleCategoryName: '',
				ShareArticleCategoryName: '全部',
				fenleiInv: 0,
				wenzhangfenlei: [],
				hasNoMoreData: false,
				isMylife: true,
				isgetData: false,
				Ailist: [],
				userInfo: {},
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				isLoading: false,
				releaseDia: false,
				toView: '', //回到顶部id
				currentPage: 'longIndex',
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1, 1, 1, 1, 1, 1], //第几页存储
				tabTitle: [],
				allArticleCategory: [],
				listData: [],
				defaultHeight: '',
				query: {
					pageSize: 5,
					isDraft: false,
					lastDocId: '',
					shareToAll: false,
					systemArticle: false,
					categoryIds: []
				},
				shareToAll: false,
				//导航栏
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				menberdata: '',
				checkShareItem: {},
				tiplist: [],
				audioSrc: '',
				audioContext: null,
				lastDocId: '',
				videolist: [],
				huizong: {
					'familyCount': 0,
					'articleCount': 0,
					'lifeCount': 0
				}
			};
		},
		mounted() {
			// 监听窗口滚动事件
			window.addEventListener('scroll', this.handleScroll);
			console.log('index mounted ')
			let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
			if (token) {
				// 当天是否有日历提醒
				let today = dayjs().format('YYYY-MM-DD')
				let data = {
					dayDate: today,
				}

				this.$api.getCalendarEventsByDate(data).then(res => {
					if (res[today]) {
						this.tiplist = res[today]
						console.log('tiplist', this.tiplist);
					}
				})
			}
			// 支持的AI列表
			this.$api2.getSupportedAI().then(res => {
				this.Ailist = res.supportedItems
				// this.Ailist.push({
				// 	workflowName:'多图生成视频',
				// 	workflowId:''
				// })
			})

		},
		beforeDestroy() {
			// 在组件销毁时移除监听器
			window.removeEventListener('scroll', this.handleScroll);
		},
		computed: {
			familyTipValid() {
				return this.tiplist && this.tiplist.length > 0
			}
		},
		onShow() {
			let needRefresh = uni.getStorageSync('needRefresh') ? uni.getStorageSync('needRefresh') : ''
			console.log('onShow needRefresh', needRefresh);
			if (needRefresh == 1) {
				// this.currentTab = 0
				this.releaseDia = false
				this.getAllCategories()
				uni.setStorageSync('needRefresh', '')

			}

		},
		onLoad(e) {

			console.log('index onload', e, this.tabTitle);
			if (e.index) {
				this.currentTab = -1
				this.tabClick = -1
			}
			let token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
			if (e.inviterFamilyId && e.inviterUsername) {
				this.menberdata = {
					inviterFamilyId: e.inviterFamilyId,
					inviterUsername: e.inviterUsername,
					matchedFamilyMemberId: e.matchedFamilyMemberId,
				}
				if (token) {
					this.menberUser()
				} else {
					uni.setStorageSync('menberdata', this.menberdata)
					uni.reLaunch({
						url: `/pages/login/index`
					})
				}
			} else {
				console.log('aaabbb');
				this.getuserInfo();
			}

			this.getAllCategories()
			this.getVideo()
			this.mySummary()

			this.$api.getSystemArticleCategory().then(res => {
				console.log('文章分类')
				console.log(res)
				this.wenzhangfenlei = res
				if (res.length > 0) {
					this.ArticleCategoryName = res[0].name
				}
			})
		},
		methods: {
			videoPlay(index) {

				let video = uni.createVideoContext("video" + index, this)
				video.play();

				for (var i = 0; i < this.listData.length; i++) {
					if (i != index) {
						let video2 = uni.createVideoContext("video" + i, this);
						video2.pause();
					}
				}
			},
			handleScroll() {
				// 防止重复触发
				if (this.isLoading || this.hasNoMoreData) return;

				// 判断是否滚动到底部
				const isBottom =
					window.innerHeight + window.scrollY >=
					document.documentElement.scrollHeight - 100; // 100 是缓冲值，可以根据需要调整

				if (isBottom) {
					console.log('loadMore()');
					this.isLoading = true
					this.getData(this.currentTab, false)

				}
			},
			handleSystemArticleCommand(e) {
				console.log('handleSystemArticleCommand', e);
				this.fenleiInv = 1
				delete this.query.categoryIds
				this.query.systemArticleCategory = e.id
				this.ArticleCategoryName = e.name
				this.lastDocId = ''
				this.getData(this.currentTab, true)
			},
			handleShareArticleCategoryChange(e) {
				console.log('handleShareArticleCategoryChange', e);
				this.fenleiInv = 0
				if (e.id == -1) {
					delete this.query.categoryIds
				} else {
					this.query.categoryIds = [e.id];
				}
				delete this.query.systemArticle
				delete this.query.systemArticleCategory
				this.ShareArticleCategoryName = e.name
				this.lastDocId = ''
				this.getData(this.currentTab, true)

			},
			fabu_handleCommand(e) {
				console.log(e)
				if (e == 1) {
					uni.navigateTo({
						url: `/pages/create/article`
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: `/pages/create/picture`
					})
				} else {
					uni.navigateTo({
						url: `/pages/create/video`
					})
				}
			},
			fabulife_handleCommand(e) {
				console.log(e)
				if (e == 1) {
					uni.navigateTo({
						url: `/pages/create/article?isMylife=1`
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: `/pages/create/picture?isMylife=1`
					})
				} else {
					uni.navigateTo({
						url: `/pages/create/video?isMylife=1`
					})
				}
			},
			mine_handleCommand(e) {
				console.log(e)
				if (e == 1) {
					uni.navigateTo({
						url: `/pages/tabbar/mine/mine`
					})
				} else if (e == 2) {
					// 我的收藏
					uni.navigateTo({
						url: '/pages/tabbar/mine/collection'
					});
				} else if (e == 3) {
					// 我的足迹
					// uni.navigateTo({
					// 	url: `/pages/create/video`
					// })
					uni.navigateTo({
						url: '/pages/tabbar/mine/footprint'
					});
				} else if (e == 4) {
					// 我的设置
					uni.reLaunch({
						url: '/pages/tabbar/mine/setting'
					});
				} else if (e == 5) {
					// 退出登录
					uni.removeStorageSync('token')
					uni.reLaunch({
						url: '/pages/login/index'
					});
				}
			},
			handleCommand(e) {

				const item = this.Ailist.find((item) => item.workflowId === e);

				if (item.workflowName == '文生图') {
					uni.navigateTo({
						url: `/pages/ai/texttopic?workflowId=${e}`
					})
				} else if (item.workflowName == '图片高清化') {
					uni.navigateTo({
						url: `/pages/ai/gaoqingpic?workflowId=${e}`
					})
				} else if (item.workflowName == '图片风格化重绘') {
					uni.navigateTo({
						url: `/pages/ai/chonghui?workflowId=${e}`
					})
				} else if (item.workflowName == '图片指令重绘') {
					uni.navigateTo({
						url: `/pages/ai/chonghuitext?workflowId=${e}`
					})
				} else if (item.workflowName == '美颜') {
					uni.navigateTo({
						url: `/pages/ai/gaoqingpic?workflowId=${e}`
					})
				} else if (item.workflowName == '换脸') {
					uni.navigateTo({
						url: `/pages/ai/huanlian?workflowId=${e}`
					})
				} else if (item.workflowName == '文本朗读') {
					uni.navigateTo({
						url: `/pages/ai/langdu?workflowId=${e}`
					})
				} else if (item.workflowName == '歌词音乐生成') {
					uni.navigateTo({
						url: `/pages/ai/musicnotishi?workflowId=${e}`
					})
				} else if (item.workflowName == '提示词音乐生成') {
					uni.navigateTo({
						url: `/pages/ai/music?workflowId=${e}`
					})
				} else if (item.workflowName == '多图生视频') {
					uni.navigateTo({
						url: `/pages/ai/pictovideo?workflowId=${e}`
					})
				}
			},
			toVideoInfo(index) {
				var now = {}
				let arr = this.videolist.concat()
				for (var i = 0; i < arr.length; i++) {
					if (i == index) {
						now = arr[i] //声明一个对象保存符合要求的数据
						arr.splice(i, 1) //先把符合条件的数据从当前数组中删除
						break;
					}
				}
				arr.unshift(now) //通过unshift函数把符合要求的数据放到第一位
				let data = JSON.stringify(arr)
				console.log(data)
				uni.navigateTo({
					url: '/pages/tabbar/video/videoInfo?data=' + encodeURIComponent(JSON.stringify(arr))
				})
			},
			toPage(url) {
				if (url == '/pagesfriend/tabbar/index') {
					let token = uni.getStorageSync('token')
					if (token) {
						this.$api.myInfo().then(res => {
							console.log('用户信息', res)
							this.$api2.createUser(res).then(res2 => {
								uni.navigateTo({
									url: '/pagesfriend/tabbar/index'
								})
							})
						})
					} else {
						uni.navigateTo({
							url: '/pagesfriend/tabbar/index'
						})
					}
				} else if (url == '/') {
					uni.reLaunch({
						url: '/pages/tabbar/index'
					})
				}
				uni.navigateTo({
					url
				})
			},
			mySummary() {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$api.mySummary().then(res => {
						this.huizong = res
					})
				}
			},
			getVideo() {
				let query = {
					categoryIds: [],
					pageSize: 6,
					lastDocId: '',
					type: 'video',
					isDraft: false
				}
				let token = uni.getStorageSync('token')
				if (token) {
					this.$api.queryArticles(query).then(res => {
						this.videolist = res.list
						console.log('this.videolist', this.videolist);
					})
				} else {
					// 国之脊梁
					query.systemArticleCategory = 'countryBackbone'
					query.systemArticle = true
					this.$api.querySharedArticles(query).then(res => {
						this.videolist = res.list
						console.log('this.videolist', this.videolist);
					})
				}
			},
			getuserInfo() {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$api.myInfo().then(res => {
						this.userInfo = res
						console.log('getuserInfo', this.userInfo)
					})
				}
			},
			toNavright() {
				this.tabLeft = 9999;
			},
			btnClick() {
				uni.switchTab({
					url: '/pages/chat/index'
				})
			},
			toCreateFamily() {
				uni.navigateTo({
					url: '/pages/tabbar/family/createFamily?type=1'
				})
			},
			showShareDia(item) {
				this.checkShareItem = item
				this.$refs.popup.open('bottom')
			},
			menberUser() {
				if (this.menberdata) {
					this.$api.acceptInvite(this.menberdata).then(res => {
						this.menberdata = ''
						uni.showModal({
							title: '提示',
							content: '加入家庭成功',
							confirmText: '我知道了',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					}).catch(err => {
						uni.showModal({
							title: '提示',
							content: err,
							confirmText: '我知道了',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					})
				}


			},

			// 获取导航栏信息
			getAllCategories() {
				let tabBars = [{
					name: '分享',
					id: ''
				}, {
					name: '全部',
					id: ''
				}]

				let token = uni.getStorageSync('token')
				if (token) {
					this.$api.myInfo().then(res => {
						console.log(res)

						if (res.showUserGuide) {
							tabBars = [{
								name: '分享',
								id: ''
							}, {
								name: '全部',
								id: ''
							}]
						} else {
							console.log('123123')
							tabBars = [{
								name: '全部',
								id: ''
							}]
						}
					})
				}

				if (this.currentTab == -1) {
					// 发布页跳转过来的，直接让它到全部
					let tabTitleIndex = this.query.shareToAll ? 1 : 0
					this.currentTab = tabTitleIndex
					this.tabClick = tabTitleIndex
				}
				let tempAllArticleCategory = [{
					'name': '全部',
					'id': -1
				}]
				this.$api.getAllCategories().then(res => {
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
							tempAllArticleCategory.push({
								name: res[i],
								id: i
							});
						}
						this.allArticleCategory = tempAllArticleCategory
						this.tabTitle = tabBars;
						console.log('this.tabTitle', this.tabTitle, this.currentTab);
						this.getData(this.currentTab, true);
					}
				});

			},
			changeFenleiInv(index) {
				if (this.fenleiInv == index) {
					return
				}
				this.fenleiInv = index
				if (index == 0) {
					this.query.systemArticleCategory = ''
					this.ShareArticleCategoryName = '全部'
				}
				this.lastDocId = '';
				this.getData(this.currentTab, 1)
			},

			getData(index, isFirstPage = true) {
				uni.showLoading({
					title: '加载中...'
				});
				this.loadingOver = false
				console.log('this.tabTitle', this.tabTitle[0].name);
				if (this.tabTitle[0].name == '分享') {
					console.log('分享index', index);
					if (index == 0) {
						if (this.fenleiInv == 0) {
							this.query.shareToAll = true
							delete this.query.systemArticle
						} else {
							this.query.systemArticle = true
							delete this.query.shareToAll
						}
					} else {
						delete this.query.systemArticle
						delete this.query.shareToAll
					}

					console.log(index)

				} else {
					delete this.query.systemArticle
					delete this.query.shareToAll
				}

				if (isFirstPage) {
					this.query.lastDocId = ''
				} else {
					this.query.lastDocId = this.lastDocId
				}

				// if (this.tabTitle[0].name == '分享') {
				// 	if (index == 0) {
				// 		if (this.fenleiInv == 1) {
				// 			delete this.query.lastDocId
				// 		}
				// 	}
				// }

				this.isgetData = true
				console.log("test share", this.query.shareToAll, this.query.systemArticle)
				if (this.query.shareToAll || this.query.systemArticle) {
					this.$api.querySharedArticles(this.query).then(res => {
						if (isFirstPage) {
							this.listData = res.list;
							console.log('isFirstPage', isFirstPage, this.listData);
						} else {
							this.listData = [...this.listData, ...res.list];
						}

						if (res.lastDocId) {
							this.lastDocId = res.lastDocId;
							this.hasNoMoreData = false
						} else {
							this.lastDocId = ''
							this.hasNoMoreData = true
						}
						uni.hideLoading()
						this.loadingOver = true
						this.isgetData = false
						this.isLoading = false
					});
				} else {
					this.$api.queryArticles(this.query).then(res => {
						if (isFirstPage) {
							this.listData = res.list;
							console.log('isFirstPage', isFirstPage, this.listData);
						} else {
							this.listData = [...this.listData, ...res.list];
						}

						if (res.lastDocId) {
							this.lastDocId = res.lastDocId;
						} else {
							this.lastDocId = ''
							this.hasNoMoreData = true
						}
						uni.hideLoading()
						this.loadingOver = true
						this.isgetData = false
						this.isLoading = false
					});
				}

			},
			// 导航栏点击
			longClick(index) {
				console.log('longClick', this.tabClick, index);
				if (this.tabClick == index) {
					return
				}
				this.tabClick = index; //设置导航点击了哪一个
				util.throttle(this.changeTab(index))
			},
			toTop() {
				this.toView = '';
				setTimeout(() => {
					this.toView = 'top' + this.currentTab;
				}, 10);
			},
			closeDia() {
				this.releaseDia = false
			},
			changeTab: util.throttle(function(index) {
				this.currentTab = index;
				this.hasNoMoreData = false;
				this.lastDocId = ''
				console.log('throttle', this.tabTitle, index)

				if (this.tabTitle[0].name == '分享') {
					if (index == 0 || index == 1) {
						this.query.categoryIds = [];
					} else {
						this.query.categoryIds = [this.tabTitle[this.currentTab].id];
					}
				} else {
					if (index == 0) {
						this.query.categoryIds = [];

					} else {
						this.query.categoryIds = [this.tabTitle[this.currentTab].id];
					}
				}
				console.log('1111111', this.listData.length > 0 && this.isgetData == true);
				if (this.listData.length > 0 && this.isgetData == true) {
					console.log('currentab ' + index + '已经有数据了');
					return
				} else {
					this.toTop()
				}
				console.log('xxxxxxxxxxxxxx');
				this.getData(index, true);
				// this.listData = [];
				// this.query.lastDocId = '';
				console.log(this.currentTab);
			}, 300),
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current; //获取索引
				this.longClick(index);
			},
			// 加载更多 util.throttle为防抖函数，这里用的不是这个，用的是handleScroll函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`); //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				if (this.tabTitle[this.currentTab].lastDocId) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.getData(this.currentTab, false);
				} else {
					console.log('currentab ' + currentTab + '已经到底了');
				}
			}, 300),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				this.tabTitle[this.currentTab].lastDocId = ''
				this.getData(this.currentTab, true);
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/news/search'
				});
			},
		}
	};
</script>

<style>
	page {
		background-color: #ffffff;

	}
</style>
<style lang="scss" scoped>
	.homePage {
		margin-bottom: 2000rpx;
		margin-top: 20px;
		padding: 0 20%;
		display: flex;
		justify-content: space-between;

		.leftbox {
			width: 300px;
			background-color: #fff;
			border-radius: 10rpx;

			.tuijianVideo {
				.titles {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: auto;
						margin-right: 10rpx;
					}
				}

				.videolist {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.listss {
						width: 48%;
						height: 170rpx;
						border-radius: 10rpx;
						overflow: hidden;
						margin-top: 30rpx;
						cursor: pointer;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}
			}

			.userInfo {
				width: 100%;
				height: 200px;
				border-radius: 6px;
				margin-bottom: 24px;
				background: rgba(244, 245, 247, .5);
				padding: 20px;

				.touxiangs {
					display: flex;
					align-items: center;
					font-weight: bold;

					image {
						width: 30px;
						height: 30px;
						border-radius: 50%;
						margin-right: 10px;
					}

					.iconfont {
						font-size: 30rpx;
					}
				}

				.nums {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 20px 0;

					.li {
						display: flex;
						align-items: center;
						font-size: 36rpx;

						span {
							font-size: 26rpx;
							color: #908e8e;
							margin-left: 3px;
						}
					}

					.list22 {
						flex-direction: column;
						cursor: pointer;

						image {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}

			.list {
				width: 90%;
				height: 80rpx;
				display: flex;
				align-items: center;
				padding-left: 40rpx;
				margin: 10px auto;
				border-radius: 10rpx;
				cursor: pointer;
				color: #8d8d8d;
			}

			.iconfont {
				margin-right: 20rpx;
			}

			.list:hover {
				background-color: #f1f1f1;
				color: #de4849;
			}

			.active {
				background-color: #de4849;
				color: #fff;
			}
		}

		.rightBox {
			width: 65%;
			height: 800px;
			border-radius: 10rpx;
			background-color: #fff;
			position: relative;

			.yaomen {
				width: 100%;
				height: auto;
				background: linear-gradient(186deg, snow -1.9%, rgba(255, 227, 227, .23) 30.62%, rgba(255, 190, 190, 0) 98.17%), #fff;
				padding: 20px 32px;
				border-radius: 10px;

				.labes {}

				.boxs {
					.list {

						margin-top: 10px;
						cursor: pointer;

						.title {
							display: flex;
							align-items: center;
						}

						.dian {
							width: 4px;
							height: 4px;
							background-color: #000;
							border-radius: 50%;
							display: block;
							margin-right: 8px;
						}
					}
				}
			}

			.fenlei2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20px;
				padding-left: 20px;

				span {
					margin-right: 50px;
					cursor: pointer;
					font-size: 16px;

				}

				.active {
					color: #de4849;
				}
			}
		}
	}

	.fenlei {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #efefef;
		box-sizing: border-box;
		justify-content: space-between;
		padding: 20rpx 150rpx;

		view {
			height: 60rpx;
			width: 170rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border-radius: 10rpx;
			border: 1px solid #de4849;

		}

		.active {
			background-color: #de4849;
			color: #fff;
		}

	}

	.barHeight {
		height: var(--status-bar-height);
		background-color: #de4849;
	}

	.fixedTop {
		width: 100%;
		background-color: #fff;
		z-index: 100;
	}

	.swiperBox {
		height: calc(100vh);
	}


	.indexPage {
		width: 100%;
		font-size: 28upx;
		min-height: 100vh;
		overflow: hidden;
		color: #6b8082;
		position: relative;
		background-color: #f6f6f6;
	}

	// .content {
	// 	width: 100%;
	// 	height: 80vh;
	// 	overflow-y: scroll;

	// 	.card {
	// 		margin-bottom: 20rpx;
	// 		border-bottom: 1px solid #ebebeb;
	// 	}
	// }

	.nav {
		color: white;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.navTabBox {
			width: 100vw;

			.click {
				color: #de4849 !important;
				font-weight: bold;
			}

			.longTab {
				width: 100%;
				position: relative;
				padding-right: 80rpx;

				.rightIcon {
					position: absolute;
					z-index: 1000;
					right: 0;
					height: 90rpx;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #000;
					background-color: #fff;
					box-shadow: -5px 0px 4px #f1f1f1;
					width: 58rpx;
				}

				.longItem {
					height: 90upx;
					display: inline-block;
					line-height: 90upx;
					text-align: center;
					color: #999;
				}

				.underlineBox {
					height: 3px;
					width: 20%;
					display: flex;
					align-content: center;
					justify-content: center;
					transition: 0.5s;

					.underline {
						width: 84upx;
						height: 4px;
						background-color: #de4849;
					}
				}
			}
		}
	}

	.tips {
		width: 600rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;

		.boxs {
			padding: 30rpx;
		}

		.labes {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #d0bf29;
		}

		.list {
			margin-bottom: 30rpx;

			.desc {
				color: #999;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}

		.btn {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 1px solid #f5f5f5;
			font-size: 28rpx;
			color: red;
		}
	}

	.container {
		width: 100%;
		padding: 20px;
	}

	.loading {
		padding: 10px;
		text-align: center;
		color: #999;
	}

	.page_top {
		width: 100%;
		height: 355px;
		box-sizing: border-box;
		position: relative;

		video {
			width: 100%;
			height: 100%;

		}

		.gongulist {
			position: absolute;
			z-index: 1000;
			left: 50%;
			transform: translateX(-50%);
			bottom: 22%;
			display: flex;
			background-color: #fff;
			border-radius: 10px;
			padding: 10px 20px;
			align-items: center;
			justify-content: center;

			.family {
				margin-right: 20px;
				cursor: pointer;
				color: #333;
				font-size: 18px;
				background-color: yellowgreen;
			}

			span {
				margin-right: 20px;
				cursor: pointer;
				color: #333;
				font-size: 15px;
			}

			span:hover {
				// color: #d62e2e;
				color: white;
				background-color: #d62e2e;
			}
		}

		.gongulist2 {
			position: absolute;
			z-index: 1000;
			left: 50%;
			transform: translateX(-50%);
			bottom: 5%;
			display: flex;
			background-color: #fff;
			border-radius: 10px;
			padding: 10px 20px;

			span {
				margin-right: 20px;
				cursor: pointer;
				color: #333;
				font-size: 15px;
			}

			span:hover {
				// color: #d62e2e;
				color: white;
				background-color: #d62e2e;
			}
		}

		.searchBox {
			position: absolute;
			z-index: 1000;
			left: 50%;
			transform: translateX(-50%);
			top: 10%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 440rpx;
				height: auto;
			}

			.iunputs {
				background: hsla(0, 0%, 100%, .85);
				backdrop-filter: blur(40px);
				border-radius: 8px;
				width: 704px;
				height: 48px;
				margin: 20px auto;
				display: flex;
				align-items: center;
				padding-left: 20px;
				cursor: pointer;

				input {
					width: 90%;
				}

				.iconfont {
					width: 80px;
					height: 48px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					right: 0;
					color: red;
					cursor: pointer;
					z-index: 100;
				}
			}
		}

		.table_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
			position: absolute;
			width: 95%;
			top: 20px;
			left: 2.5%;
			z-index: 1000;
			font-size: 13px;
			cursor: pointer;

			.li {
				display: flex;
				align-items: center;
				position: relative;

				.erweima {
					position: absolute;
					z-index: 100;
					width: 300rpx;
					height: 300rpx;
					background-color: #fff;
					padding: 20rpx;
					border-radius: 20rpx;
					left: 13px;
					top: 30px;
					display: none;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.li:hover .erweima {
				display: block;
			}

			span {
				margin-left: 35px;
				display: flex;
				align-items: center;

				.iconfont {
					margin-right: 10px;
				}

				image {
					width: 25px;
					height: 25px;
					border-radius: 50%;
					margin-right: 10px;
				}
			}
		}
	}

	.content::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 0px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 0px;
		background-color: white;
		/*滚动槽颜色*/
	}

	.red-line {
		height: 2px;
		/* 设置横线的高度 */
		background-color: red;
		/* 设置横线的颜色为红色 */
		width: 100%;
		/* 设置横线的宽度为100% */
	}
</style>